<template>
	<!-- 广告-宠粉节部分 加  内容区、爆款秒杀和新品专区-->
	<view class="ads-box">
		<view class="ads">
			<text class="ads-left">宠粉节<text class="ads-date">（8.27-8.29）</text>，限时...</text>
			<text class="ads-right">
				<text class="ads-right_0">0</text>天
				<text class="ads-right_0">0</text>时
				<text class="ads-right_0">0</text>分
				<text class="ads-right_0">0</text>秒
			</text>
		</view>
		<!-- 内容区 -->
		<view class="ads-content">
			<!-- 爆款秒杀 -->
			<view class="ads-list">
				<view class="ads-img">
					<image class="ads-img-1"
						src="https://img2.baidu.com/it/u=2136360923,541831233&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
				</view>
				<view class="goods-list">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view class="goods-list-item" v-for="item in hotGoods" :key='item.name'
							@click="detail(item.num)">
							<image class="goods-list-item_img" :src="item.imgurl" mode=""></image>
							<view class="goods-list-item_name">
								<text class="goods-list-item_name-text">{{item.name}}</text>
							</view>
							<view class="goods-list-item_price">
								<text class="goods-list-item_price-text">￥{{item.price}}</text>
								<text class="goods-list-item_price-s">秒杀</text>
							</view>
							<view class="goods-list-item_num">
								<text class="iconfont icon-camera"></text>
								<text>{{item.num}}人已买</text>
							</view>
							<view class="goods-list-item_cart">
								<text class="iconfont icon-cart"></text>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>
			<!-- 新品专区 -->
			<view class="ads-list">
				<view class="ads-img">
					<image class="ads-img-1"
						src="https://img2.baidu.com/it/u=1040813196,2151709997&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
				</view>
				<view class="goods-list">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view class="goods-list-item" v-for="item in newGoods" :key='item.name'
							@click="detail(item.num)">
							<image class="goods-list-item_img" :src="item.imgurl" mode=""></image>
							<view class="goods-list-item_name">
								<text class="goods-list-item_name-text">{{item.name}}</text>
							</view>
							<view class="goods-list-item_price">
								<text class="goods-list-item_price-text">￥{{item.price}}</text>
								<text class="goods-list-item_price-s">秒杀</text>
							</view>
							<view class="goods-list-item_num">
								<text class="iconfont icon-camera"></text>
								<text>{{item.num}}人已买</text>
							</view>
							<view class="goods-list-item_cart">
								<text class="iconfont icon-cart"></text>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>
			<!-- 应急水果等商品区 -->
			<view class="goods">
				<!-- tab -->
				<view class="goods-tab">
					<view class="goods-tab-item" :class="{'goods-tab-item-active':activeIndex===1}"
						@click="tabClick(1)">
						应季水果
					</view>
					<view class="goods-tab-item" :class="{'goods-tab-item-active':activeIndex===2}"
						@click="tabClick(2)">
						坚果零食
					</view>
					<view class="goods-tab-item" :class="{'goods-tab-item-active':activeIndex===3}"
						@click="tabClick(3)">
						新鲜蔬菜
					</view>
					<view class="goods-tab-item" :class="{'goods-tab-item-active':activeIndex===4}"
						@click="tabClick(4)">
						安心奶类
					</view>
				</view>
				<view class="goods-list">
					<view class="goods-list-item goods-list-item_48" v-for="item in tabGoods" :key='item.name'
						@click="detail(item.num)">
						<image class="goods-list-item_img" :src="item.imgurl" mode=""></image>
						<view class="goods-list-item_name">
							<text class="goods-list-item_name-text">{{item.name}}</text>
						</view>
						<view class="goods-list-item_price">
							<text class="goods-list-item_price-text">￥{{item.price}}</text>
							<text class="goods-list-item_price-s">秒杀</text>
						</view>
						<view class="goods-list-item_num">
							<text class="iconfont icon-camera"></text>
							<text>{{item.num}}人已买</text>
						</view>
						<view class="goods-list-item_cart">
							<text class="iconfont icon-cart"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotGoods: [],
				newGoods: [],
				tabGoods: [],
				activeIndex: 1,
				adsGoodsApi: "/home/adsGoods",
				tabGoodsApi: "/home/tabGoods?type=1"
			}
		},
		created() {
			this.http({
				url: this.adsGoodsApi,
				success: (res) => {
					this.hotGoods = res.hotGoods
					this.newGoods = res.newGoods
				}
			})
			this.http({
				url: this.tabGoodsApi,
				success: (res) => {
					this.tabGoods = res;
				}
			})
		},
		methods: {
			tabClick(index) {
				this.activeIndex = index;
				uni.request({
					url: `/api/home/tabGoods?type=${index}`,
					method: "get",
					success: (res) => {
						this.tabGoods = res.data;
					}
				})
			},
			scroll() {

			},
			detail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style>
	/* 宠粉节部分 */
	.ads {
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #fff;
		background-color: #E86DB1;
		padding: 0 15px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.ads-date {
		font-size: 14px;
	}

	.ads-left {
		float: left;
	}

	.ads-right {
		float: right;
	}

	.ads-right_0 {
		background-color: #000;
		opacity: .8;
		padding: 0 5px;
	}

	.ads-img {
		width: 97%;
		height: 80px;
		margin: 0 auto 10px;

	}

	.ads-img-1 {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.ads-list {
		margin-top: 10px;
	}

	.goods-list {
		margin: 0 auto;
		width: 95%;
		/* background: #fff; */
		border-radius: 10px;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}


	.goods-list-item {
		width: 33%;
		text-align: center;
		padding: 10px;
		position: relative;
		display: inline-block;
		background-color: #fff;
	}

	.goods-list-item_48 {
		width: 48%;
		box-sizing: border-box;
		margin-bottom: 10px;

	}

	.goods-list-item_48:nth-child(2n-1) {
		margin-right: 10px;
	}

	.goods-list-item_img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-bottom: 10px;
	}

	.goods-list-item_name {
		text-align: left;
		height: 46px;
	}

	.goods-list-item_name-text {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-align: left;
		white-space: normal;
	}

	.goods-list-item_price {
		height: 26px;
		text-align: left;
	}

	.goods-list-item_price-text {
		color: #F90000;
		font-weight: bold;
		padding-right: 5px;
	}

	.goods-list-item_price-s {
		font-size: 14px;
	}

	.goods-list-item_num {
		width: 65%;
		height: 20px;
		background-color: #FFEBEB;
		border-radius: 10px;
		font-size: 14px;
		opacity: .9;
		color: #F90000;
	}

	.goods-list-item_cart {
		position: absolute;
		right: 7px;
		bottom: 9px;
		color: #fff;
		;
		background-color: #FF0059;
		border-radius: 50%;
		;
		width: 22px;
		height: 22px;
		text-align: center;
		line-height: 22px;
		font-size: 14px;
	}

	.icon-cart {

		/* float: right; */
	}

	/* tab部分商品区 */
	.goods-tab {
		width: 100%;
		background: #fff;
		display: flex;
		height: 60px;
		line-height: 60px;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.goods-tab-item {
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 16px;
	}

	.goods-tab-item-active {
		background-color: #EC71B5;
		color: #fff;
	}
</style>
